<template>
    <van-search v-model="value" placeholder="搜索商品,共3000+款好物" input-align="center" @focus="onfocus" />
    <div class="center">
        <div>
            <van-sidebar v-model="active">
                <van-sidebar-item :title="item.name" v-for="item in categoryL1List" :key="item.showIndex"
                    @click="clickHandler(item.id)" />
            </van-sidebar>
        </div>
        <div class="right">
            <van-image v-for="item in currentCategory" :src="item.picUrl" width="295px" height="110px"></van-image>
            <van-grid square icon-size="66px" column-num="3">
                <van-grid-item v-for="item in categoryL2List" :key="item.name" :icon="item.wapBannerUrl" :text="item.name">
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useCateList } from '@/hook/Category';
let { active, value, categoryL1List, categoryL2List, clickHandler, currentCategory, onfocus, } = useCateList()
</script>

<style scoped lang="scss">
.center {
    display: flex;

    .right {
        flex: 1;
    }
}
</style> 